<template>
  <div class="record">
    <!--<div class="content mairu">-->
      <div class="wrapper">
        <scroller
          :on-refresh="refresh"
          :noDataText="$t('no more')"
          ref="myScroller"
        >
          <div class="list">
            <ul>
              <li  v-for="(i,k) in data" class="list-item">
                <div>
                  <P class="count-down" v-if="i.order_status !== '3'">
                    {{$t('count down')}}
                    <clocker :time="i.match_time" >
                      <span>%H</span>:<span>%M</span>:<span>%S</span>
                    </clocker>
                  </P>
                </div>
                <div class="info-line" style="font-size: .4rem">
                  <p>{{$t('paycoin.num')}}: {{i.cny}}</p>
                  <p style="text-align: right" :style="{color: i.color}">{{i.showStatus}}</p>
                </div>
                <div class="order-info">
                  <div class="info-line">
                    <p >{{$t('paycoin.name')}}:
                      {{i.user.bank_realname}}
                      <!--{{uInfo.bank_realname}}-->
                    </p>
                    <p class="line">
                      <span v-if="query.type === 0">{{$t('seller')}}</span>
                      <span v-else>{{$t('buyer')}}</span>: {{i.user_id}}
                    </p>
                  </div>
                  <div class="info-line">
                    <p>{{$t('paycoin.phone')}}: <span class="copy-targey" @click="copy" :data-clipboard-text="i.user.mobile">{{i.user.mobile}}</span></p>
                    <p class="line" >{{$t('wechart')}}: <span class="copy-targey" @click="copy" :data-clipboard-text="i.user.wechat">{{i.user.wechat}}</span></p>
                  </div>
                  <div class="info-line">
                    <p   v-if="query.type === 0">{{$t('alipay')}}: <span class="copy-targey" @click="copy" :data-clipboard-text="i.user.alipay">{{i.user.alipay}}</span></p>
                    <p :class="{line: query.type === 0}" >{{$t('paystatus.createtime')}}: {{i.create_time}}</p>
                  </div>
                  <div class="info-line" style="padding: 0"   v-if="query.type === 0">
                    <div style="width: 9rem;">
                      <p style="padding-left: .2rem;box-sizing: border-box;border-bottom: 1px solid #dfdfdf">{{$t('bank num1')}}: <span class="copy-targey" @click="copy" :data-clipboard-text="i.user.bank_card">{{i.user.bank_card}}</span></p>
                      <p style="padding-left: .2rem;box-sizing: border-box">{{$t('bank name')}}: <span class="copy-targey" @click="copy" :data-clipboard-text="i.user.bank_address">{{i.user.bank_address}}</span></p>
                    </div>
                    <div style="text-align: center;line-height: 1.6;box-sizing: border-box;border-left: 1px solid #dfdfdf" v-if="i.order_status === '2' && i.pay_times">
                      <p>{{$t('paystatus.payfinishentime')}}</p>
                      <p>{{i.pay_times}}</p>
                    </div>
                  </div>
                  <div class="info-line" v-if="parseInt(query.type) === 1 && i.order_status !== '1'">
                    <p>{{$t('paystatus.payfinishentime')}}: {{i.pay_times}}</p>
                  </div>
                  <div class="info-line">
                    <p v-if="i.remark && !i.buy_remark">{{$t('remarkmmessage')}}: {{i.remark}}</p>
                    <p v-if="i.buy_remark && parseInt(query.type) === 1">{{$t('remarkmmessage')}}: {{i.buy_remark}}</p>
                  </div>
                </div>
                <div style="border-bottom: 1px solid #dfdfdf">
                  <div class="btn" v-if="i.order_status === '2' && query.type === 1"><button @click="doPay(i.order_sn)">{{$t('confirm sell')}}</button></div>
                  <div class="btn" v-if="i.order_status === '1' && query.type === 0"><button @click="doPay(i.order_sn)">{{$t('confirm buy')}}</button></div>
                </div>

              </li>
              <!--<li>-->
                <!--<div class="left">-->
                  <!--<p class="p2">{{$t('paycoin.name')}}: {{uInfo.bank_realname}}</p>-->
                  <!--<p class="p2">-->
                    <!--<span v-if="query.type === 0">{{$t('seller')}}</span>-->
                    <!--<span v-else>{{$t('buyer')}}</span>: {{i.user_id}}-->
                  <!--</p>-->
                  <!--<p class="p2" >{{$t('wechart')}}: <span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.wechat">{{uInfo.wechat}}</span></p>-->
                  <!--<p class="p2" >{{$t('bank num1')}}: <span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.bank_card">{{uInfo.bank_card}}</span></p>-->
                  <!--<p class="p4">{{$t('paycoin.num')}}: {{i.cny}}</p>-->
                <!--</div>-->
                <!--<div class="right">-->
                  <!--<p class="p4" :style="{color: i.color}">{{i.showStatus}}</p>-->
                  <!--<p class="p2" >{{$t('paycoin.phone')}}: <span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.phone">{{uInfo.phone}}</span></p>-->
                  <!--<p class="p2" >{{$t('alipay')}}: <span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.phone">{{uInfo.alipay}}</span></p>-->
                  <!--<p class="p2" >{{$t('bank name')}}: <span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.bank_address">{{uInfo.bank_address}}</span></p>-->
                  <!--<p class="p3">{{$t('paystatus.createtime')}}: {{i.create_time}}</p>-->
                <!--</div>-->
              <!--</li>-->
              <!--<div class="user-info">-->
                <!--<div class="detail">-->
                  <!--&lt;!&ndash;<p class="model-info" >&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="label">{{$t('paycoin.name')}}:</span>&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.bank_realname">{{uInfo.bank_realname}}</span>&ndash;&gt;-->
                  <!--&lt;!&ndash;</p>&ndash;&gt;-->
                  <!--&lt;!&ndash;<p class="model-info" >&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="label">{{$t('paycoin.phone')}}:</span>&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.phone">{{uInfo.phone}}</span>&ndash;&gt;-->
                  <!--&lt;!&ndash;</p>&ndash;&gt;-->
                  <!--&lt;!&ndash;<p class="model-info" >&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="label">{{$t('wechart')}}:</span>&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.wechat">{{uInfo.wechat}}</span>&ndash;&gt;-->
                  <!--&lt;!&ndash;</p>&ndash;&gt;-->
                  <!--&lt;!&ndash;<p class="model-info" >&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="label">{{$t('alipay')}}:</span>&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.alipay">{{uInfo.alipay}}</span>&ndash;&gt;-->
                  <!--&lt;!&ndash;</p>&ndash;&gt;-->
                  <!--<p class="model-info" >-->
                    <!--<span class="label">{{$t('bank num1')}}:</span>-->
                    <!--<span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.bank_card">{{uInfo.bank_card}}</span>-->
                  <!--</p>-->
                  <!--<p class="model-info" >-->
                    <!--<span class="label">{{$t('bank name')}}:</span>-->
                    <!--<span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.bank_address">{{uInfo.bank_address}}</span>-->
                  <!--</p>-->
                  <!--<p class="model-info" v-if="i.order_status === '2'">-->
                    <!--<span class="label">{{$t('paystatus.payfinishentime')}}:</span>-->
                    <!--<span class="copy-targey">{{uInfo.pay_times}}</span>-->
                  <!--</p>-->
                  <!--&lt;!&ndash;<cell :title="$t('name')" :value="uInfo.bank_realname" ></cell>&ndash;&gt;-->
                  <!--&lt;!&ndash;<cell :title="$t('wechart')" :value="uInfo.wechat" ></cell>&ndash;&gt;-->
                  <!--&lt;!&ndash;<cell :title="$t('alipay')" :value="uInfo.alipay" ></cell>&ndash;&gt;-->
                  <!--&lt;!&ndash;<cell :title="$t('bank name')" :value="uInfo.bank_realname"></cell>&ndash;&gt;-->
                  <!--&lt;!&ndash;<cell :title="$t('bank num')" :value="uInfo.bank_card"></cell>&ndash;&gt;-->
                <!--</div>-->
              <!--</div>-->
              <!--<div class="btn" v-if="i.order_status === '2' && query.type === 1"><button @click="doPay(i.order_sn)">{{$t('confirm sell')}}</button></div>-->
              <!--<div class="btn" v-if="i.order_status === '1' && query.type === 0"><button @click="doPay(i.order_sn)">{{$t('confirm buy')}}</button></div>-->
            </ul>
            <no-data :nomore=false v-if="showNodata"></no-data>
          </div>
        </scroller>
      </div>
    <!--</div>-->
    <!--<div class="content maichu" v-if="showTab === 2">-->
      <!--<div class="list" v-for="i in data">-->
        <!--<ul>-->
          <!--<li @click="goNext(i.deal_sn,i.status, 2)">-->
            <!--<div class="left">-->
              <!--<p class="p2">{{$t('buyer')}}:{{i.user_id}}</p>-->
              <!--<p class="p4">{{$t('num')}}：{{i.cny}}</p>-->
            <!--</div>-->
            <!--<div class="right">-->
              <!--<p class="p4" :style="{color: i.color}">{{i.order_status}}</p>-->
              <!--<p class="p3">{{i.create_time}}</p>-->
            <!--</div>-->
          <!--</li>-->
          <!--<div class="btn" v-if="i.status === '交易中'"><button @click="doPay(i.deal_sn)">{{$t('confirm')}}</button></div>-->
        <!--</ul>-->
      <!--</div>-->
      <!--<div v-if="data.length === 0" style="text-align: center;padding-top: 1rem">-->
        <!--<img src="../../assets/img/404.png" alt="" style="width: 80%">-->
        <!--<p style="color: #898989">暂时没有数据</p>-->
      <!--</div>-->
    <!--</div>-->
    <!--<div v-transfer-dom>-->
      <!--<x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur>-->
        <!--<div class="user-info">-->
          <!--<x-icon type="ios-close-outline" class="close-btn" size="30" @click.native="showHideOnBlur=false"></x-icon>-->
          <!--<div class="detail">-->
            <!--<p class="model-info" style="padding: 0 .2rem">-->
              <!--<span class="label">{{$t('paycoin.name')}}</span>-->
              <!--<span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.bank_realname">{{uInfo.bank_realname}}</span>-->
            <!--</p>-->
            <!--<p class="model-info" style="padding: 0 .2rem">-->
              <!--<span class="label">{{$t('paycoin.phone')}}</span>-->
              <!--<span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.phone">{{uInfo.phone}}</span>-->
            <!--</p>-->
            <!--<p class="model-info" style="padding: 0 .2rem">-->
              <!--<span class="label">{{$t('wechart')}}</span>-->
              <!--<span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.wechat">{{uInfo.wechat}}</span>-->
            <!--</p>-->
            <!--<p class="model-info" style="padding: 0 .2rem">-->
              <!--<span class="label">{{$t('alipay')}}</span>-->
              <!--<span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.alipay">{{uInfo.alipay}}</span>-->
            <!--</p>-->
            <!--<p class="model-info" style="padding: 0 .2rem">-->
              <!--<span class="label">{{$t('bank num1')}}</span>-->
              <!--<span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.bank_card">{{uInfo.bank_card}}</span>-->
            <!--</p>-->
            <!--<p class="model-info" style="padding: 0 .2rem">-->
              <!--<span class="label">{{$t('bank name')}}</span>-->
              <!--<span class="copy-targey" @click="copy" :data-clipboard-text="uInfo.bank_address">{{uInfo.bank_address}}</span>-->
            <!--</p>-->
            <!--&lt;!&ndash;<cell :title="$t('name')" :value="uInfo.bank_realname" ></cell>&ndash;&gt;-->
            <!--&lt;!&ndash;<cell :title="$t('wechart')" :value="uInfo.wechat" ></cell>&ndash;&gt;-->
            <!--&lt;!&ndash;<cell :title="$t('alipay')" :value="uInfo.alipay" ></cell>&ndash;&gt;-->
            <!--&lt;!&ndash;<cell :title="$t('bank name')" :value="uInfo.bank_realname"></cell>&ndash;&gt;-->
            <!--&lt;!&ndash;<cell :title="$t('bank num')" :value="uInfo.bank_card"></cell>&ndash;&gt;-->
          <!--</div>-->
        <!--</div>-->
      <!--</x-dialog>-->
    <!--</div>-->
  </div>
</template>

<i18n>
  count down:
    en: Pay Time
    zh-CN: 打款时间
  title.tradepaycoin:
    en: Trade Detail
    zh-CN: 交易详情
  my sale:
    en: My Sale
    zh-CN: 出售
  buyer:
    en: BuyerID
    zh-CN: 买家ID
  seller:
    en: SellerID
    zh-CN: 卖家ID
  paycoin.num:
    en: Sum
    zh-CN: 金额
  no:
    en: No.
    zh-CN: 单号
  total:
    en: Total
    zh-CN: 全部
  finish:
    en: Finished
    zh-CN: 已结束
  trading:
    en: Trading
    zh-CN: 进行中
  untrading:
    en: Untrading
    zh-CN: 未交易
  cancel:
    en: Cancel
    zh-CN: 取消交易
  pay coin:
    en: Pay Password
    zh-CN: 支付密码
  bank name:
    en: Bank Name
    zh-CN: 开户银行
  bank num1:
    en: Bank Number
    zh-CN: 银行卡号
  copy success:
    en: Copy Success
    zh-CN: 已复制到剪切板
  confirm sell:
    en: Paying Coin Now
    zh-CN: 确认付币
  confirm buy:
    en: Paying Now
    zh-CN: 确认支付
  paycoin.phone:
    en: Phone
    zh-CN: 手机号
  paycoin.name:
    en: Name
    zh-CN: 姓名
  pay already:
    en: Pay Already
    zh-CN: 已付款
  paystatus.finished:
    en: Finished
    zh-CN: 交易完成
  paystatus.payfinishentime:
    en: Pay Time
    zh-CN: 付款时间
  paystatus.createtime:
    en: Time
    zh-CN: 创建时间
</i18n>

<script>
  import {Cell, Group, Tab, TabItem, XDialog, Clocker, dateFormat} from 'vux'
  import Clipboard from 'clipboard'
  import NoData from '../../components/nodata'
  export default {
    name: 'trad',
    components: {
      Cell,
      Group,
      Tab,
      TabItem,
      XDialog,
      Clocker,
      NoData
    },
    data () {
      return {
        data: [],
        listRows: 20,
        page: 1,
        showHideOnBlur: false,
        buttonInfo: '',
        showNodata: false,
        userInfo: [],
        uInfo: {
          wechat: '',
          alipay: '',
          bank_address: '',
          bank_card: '',
          bank_realname: ''
        },
        leavemessage: ''
      }
    },
    computed: {
      query () {
        return this.$route.query
      }
    },
    created () {
      this.init()
      console.log(this.query)
    },
    methods: {
      init () {
        this.getInfo()
        // this.query.type === 0 ? this.buttonInfo = this.$t('confirm buy') : this.buttonInfo = this.$t('confirm sell')
      },
      refresh (done) {
        this.data = []
        this.userInfo = []
        this.getInfo(done)
      },
      getInfo (done, addUserInfo) {
        let vue = this
        this.post({
          url: `/api/logging/myorder`,
          params: {
            token: localStorage.token,
            type: vue.query.type,
            deal_sn: vue.query.num
          },
          success: (data) => {
            if (data.code === 0) {
              this.$vux.toast.show({
                text: `${data.msg}`,
                type: 'text'
              })
            } else if (data.code === 1) {
              let newData = data.data
              if (newData.length === 0) {
                vue.showNodata = true
              }
              let midData = newData.map(function (val, index) {
                if (val.order_status === '1') {
                  val.color = '#57a94f'
                  val.showStatus = vue.$t('paystatus.trading')
                } else if (val.order_status === '2') {
                  val.color = '#cc0000'
                  val.showStatus = vue.$t('pay already')
                } else if (val.order_status === '3') {
                  val.showStatus = vue.$t('paystatus.finished')
                }
                val.end = false
                let time = (val.match_time + 12 * 60 * 60) * 1000
                let paytime = val.pay_times * 1000
                val.match_time = dateFormat(time, 'YYYY-MM-DD HH:mm:ss')
                if (paytime > 0) {
                  val.pay_times = dateFormat(paytime, 'YYYY-MM-DD HH:mm:ss')
                }
                return val
              })
              for (let i = 0; i < midData.length; i++) {
                this.data.push(midData[i])
              }
            }
            done()
          }
        })
      },
      doPay (num) {
        // console.log(num)
        // console.log(type)
        let vm = this
        if (parseInt(vm.query.type) === 0) {
          vm.$vux.confirm.show({
            title: vm.$t('tradetips'),
            showInput: true,
            placeholder: vm.$t('inputmessage'),
            onCancel () {
            },
            onConfirm (msg) {
              vm.leavemessage = msg
              vm.$vux.confirm.show({
                title: vm.$t('pay coin'),
                showInput: true,
                placeholder: vm.$t('pay coin'),
                inputAttrs: {
                  type: 'password'
                },
                onShow () {
                  vm.$vux.confirm.setInputValue('')
                },
                onCancel () {
                },
                onConfirm (msg) {
                  vm.payRequest(msg, num)
                }
              })
            }
          })
        } else {
          vm.$vux.confirm.show({
            title: vm.$t('pay coin'),
            showInput: true,
            placeholder: vm.$t('pay coin'),
            inputAttrs: {
              type: 'password'
            },
            onCancel () {
            },
            onConfirm (msg) {
              vm.payRequest(msg, num)
            }
          })
        }
      },
      payRequest (psd, num) {
        let vm = this
        let url
        parseInt(vm.query.type) === 0 ? url = '/api/usercenter/payStatus' : url = '/api/deal/confirm_pay_coin'
        this.post({
          url: url,
          params: {
            token: localStorage.token,
            pay_password: psd,
            order_sn: num,
            buy_remark: vm.leavemessage
          },
          success: (data) => {
            if (data.code === 0) {
              vm.$vux.toast.show({
                text: `${data.msg}`,
                type: 'text'
              })
            } else if (data.code === 1) {
              vm.$vux.toast.show({
                text: `支付成功`,
                type: 'text'
              })
              vm.data = []
              vm.getInfo()
            }
          }
        })
      },
      // getDetail (id) {
      //   let vm = this
      //   let url = '/api/usercenter/sellerInfo'
      //   this.post({
      //     url: url,
      //     params: {
      //       token: localStorage.token,
      //       user_id: id
      //     },
      //     success: (data) => {
      //       if (data.code === 0) {
      //         vm.$vux.toast.show({
      //           text: `${data.msg}`,
      //           type: 'text'
      //         })
      //       } else if (data.code === 1) {
      //         if (data.data) {
      //           data.data.useid = id
      //         }
      //         vm.userInfo.push(data.data)
      //       }
      //     }
      //   })
      // },
      copy () {
        let vm = this
        var clipboard = new Clipboard('.copy-targey')
        clipboard.on('success', e => {
          console.log(e.text)
          vm.$vux.toast.show({
            text: vm.$t('copy success')
          })
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          console.log('该浏览器不支持自动复制')
          vm.$vux.toast.show({
            text: '该浏览器不支持自动复制'
          })
          // 释放内存
          clipboard.destroy()
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .vux-x-icon {
    fill: #cc0000;
  }
  .count-down {
    line-height: 1.8;
    color: #cc0000;
    padding: 0 .2rem;
  }
  .user-info {
    /*padding: .8rem 0;*/
    /*position: relative;*/
    .detail {
      .model-info {
        /*display: flex;*/
        /*display: -webkit-flex;*/
        /*justify-content: space-between;*/
        /*-webkit-justify-content: space-between;*/
        line-height: 1.8;
        font-size: .3rem;
        padding: 0 .4rem;
        .label {
          /*width: 3rem;*/
          /*text-align: right;*/
        }
        .copy-targey {
          /*width: 100%;*/
          text-align: left;
          padding-left: .2rem;
          box-sizing: border-box;
        }
      }
    }
    .close-btn {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }
  .record{
    font-size: 0.3rem;
    height: 100%;
    .wrapper {
      height: 100%;
      position: relative;
    }
  }
  .btn{
    width: 6.7rem;
    height: 0.9rem;
    margin: .4rem auto 0;
    padding-bottom: .2rem;
  }
  button{
    width: 6.7rem;
    height: 0.9rem;
    background-color: #537fbf;
    font-size: 0.28rem;
    color: #fff;
    border: 0;
    border-radius: 4px;
  }
  .list-item {
    padding: .2rem 0 0;
    .info-line {
      padding: 0 .2rem;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #dfdfdf;
      p {
        width: 100%;
        line-height: 2;
      }
      .line {
        padding-left: .2rem;
        box-sizing: border-box;
        border-left: 1px solid #dfdfdf;
      }
    }
  }

</style>
